css class 命名的重點在於要能看到就能直覺地知道這個 class 的用法
最好是能夠看名字就知道是用在哪、做甚麼的 以及與其它 class 之間的關聯

常見的命名方式

1. 駝峰式
   小駝峰: 第一個單字小寫，其餘單字第一個字母大寫 ( ex: cardItem
   大駝峰: 單字第一個字母大寫 ( ex:CardItem
2. 蛇式: 單字之間用底線分隔 ( ex: card_item
3. 烤肉串: 單字之間用 - 分隔 ( ex: card-item

以下是 CSS 三種常見的命名與設計方法

BEM

這種命名方式的 class 名稱為三個主要部分組成:區塊（Block）、元素（Element）和修飾值（Modifier），能夠讓人一眼就看出明確的結構修飾值
card__title--big (卡片 標題 大)
card__title-h1--big (卡片 標題裡的h1 大)

SMACSS

將 CSS 分為 Base、Layout、Module、State、Theme 五個層級：
Base：用來定義基礎規範，例如：HTML 元素的基本樣式、css reset
Layout：用來定義網頁的版面架構，例如 .container、grid格線系統等等。
Module：用來定義獨立、可重複使用的元件，例如 .btn(按鈕)、.card(卡牌)
State：用來定義元素的狀態，例如 .error、.disabled。
Theme：用來定義元素的顏色、字體等，例如 .theme-dark、.theme-light

OOCSS

這種命名方式認為結構（佈局）和外觀（顏色、邊框）應有不同的 class 分別管理

以按鈕舉例 :
按鈕結構的 class 可能會叫 .btn
裡面設定的樣式與結構相關 ( ex: 寬、高、間距、圓角..等
顏色外觀則另外抽出來用別的 class
.btn-dark => 暗色
.btn-light => 亮色